var GuessWordQuiz = ( function() {

    var foreignWordDiv = "<div id=\"foreignWord\">%TEXT%</div>";

    function GuessWordQuiz(application) {
        this.mApplication = application;
    }

    GuessWordQuiz.prototype.name = function() {
        return "Word Quiz";
    }

    var KWelcome = "<div class=\"ui-dialog-content ui-widget-content\" style=\"background: none; border: 0;\">"
                   +"<p>Welcome to the Word Quiz!</p>"
                   +"<p class=\"prose\" style=\"max-height: 999999px;\">This exercise will test your vocabulary by (1) presenting you an English word, (2) giving you a few seconds to think what "
                   +"the %LANGUAGE% equivallent/translation is, (3) presenting you what we think the translation is and (4) asking "
                   +"whether you guessed correctly. If you have, we will reluctantly start assuming you know this word and present you less of it, "
                   +"as times goes by. Conversely, if you say you didn't know the word, we will try showing it to you more often. "
                   +"Sorry, there are no rewards in this game, there is no point cheating.</p></div>"
    var KButton = "<button id=\"%ID%\">%TEXT%</button>";
    GuessWordQuiz.prototype.load = function(hostPanel, languageModule) {
        this.mhostPanel = hostPanel;
        this.mLanuageModule = languageModule;
        var self = this;
        var initPromise = this.mLanuageModule.init();
        this.mhostPanel.contentElement().append(KWelcome.replace("%LANGUAGE%", this.mLanuageModule.name()));
        this.mhostPanel.contentElement().append(KButton.replace("%ID%", "start").replace("%TEXT%", "Start Quiz"));
        this.mhostPanel.contentElement().find('#start').button().click(function() {
            initPromise.then(function() {
                self.play();
            });
        });

    	return initPromise;
    }

    var KForeignWord = "<div id class=\"ui-dialog-content ui-widget-content\" style=\"background: none; border: 0;\">"
                        +"<h1>%WORD%</h1></div>";
    var KEnglishWord = "<p class=\"prose\"><i>%TYPE%</i>: %ENGLISH%</p>";
    var KYesNoButtons = "<table style=\"width:90%; position:absolute; bottom:10%; height:15%; left:5%\"><tr>"
        +"<td id=\"left\" style=\"width:50%;\"><button id=\"yesButton\" style=\"width:100%; height:100%\">Yes</button></td>"
        +"<td id=\"right\" style=\"width:50%;\"><button id=\"noButton\" style=\"width:100%; height:100%\">No</button></td>"
    +"</tr></table>"
    GuessWordQuiz.prototype.play = function() {
        var self = this;
        this.mhostPanel.clear();
        var wordToken = this.mLanuageModule.nextWord();
        this.mhostPanel.contentElement().append(KForeignWord.replace("%WORD%", wordToken.entry.word));


        setTimeout(function() {
            for (type in wordToken.entry.properties.variants) {
                var typeValue = wordToken.entry.properties.variants[type];
                var english = "";
                for (var i = 0; i < typeValue.english.length; i++) {
                    english += typeValue.english[i];
                    if (i < typeValue.english.length-1) {
                        english += ", ";
                    }
                }
                self.mhostPanel.contentElement().append(KEnglishWord.replace("%TYPE%", type).replace("%ENGLISH%", english));
            }
            self.mhostPanel.contentElement().append(KYesNoButtons);
            self.mhostPanel.contentElement().find('#yesButton').button().click(function() {
                wordToken.feedback(1);
                self.play();
            });
            self.mhostPanel.contentElement().find('#noButton').button().click(function() {
                wordToken.feedback(0);
                self.play();
            });
        }, 2000);
    }

    return GuessWordQuiz;
})();
